<script setup lang="ts">
import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';

defineOptions({
  name: 'BarChart'
});
// 定义接收的数据props
const props = defineProps<{
  data?: {
    xAxisData: string[];
    seriesData: Array<{
      name: string;
      data: number[];
    }>;
  };
}>();

// 内部数据状态
const chartData = ref<{
  xAxisData: string[];
  seriesData: Array<{
    name: string;
    data: number[];
  }>;
} | null>(null);

// 监听props数据变化
watch(
  () => props.data,
  newData => {
    if (newData) {
      chartData.value = newData;
      updateChart();
    }
  }
);

const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: [] as string[]
  },
  grid: {
    left: '3%',
    right: '12%', // 调整右侧空间
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [] as string[]
  },
  yAxis: [
    {
      type: 'value',
      name: '耗时',
      position: 'left',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        formatter: '{value} ms'
      }
    },
    {
      type: 'value',
      name: '数量',
      position: 'right',
      offset: 50, // 偏移量，避免与第三个Y轴重叠
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      name: '成功率',
      position: 'right',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        formatter: '{value}%'
      },
      max: 100 // 成功率最大值为100%
    }
  ],
  series: [] as any[]
}));

// 更新图表数据的函数
async function updateChart() {
  try {
    if (!chartData.value) {
      console.log('No chart data available');
      return;
    }
    // 短暂延迟确保图表实例初始化完成（100ms较为合理）
    await new Promise(resolve => {
      setTimeout(resolve, 100);
    });
    // 更新图表选项
    await updateOptions(opts => {
      opts.xAxis.data = chartData.value?.xAxisData || [];
      opts.legend.data = chartData.value?.seriesData.map(item => item.name) || [];
      opts.series =
        chartData.value?.seriesData.map((item, _index) => {
          // 根据系列名称确定使用的Y轴
          let yAxisIndex = 1; // 默认使用第二个Y轴(数量)
          if (item.name.includes('耗时')) {
            yAxisIndex = 0; // 耗时使用第一个Y轴
          } else if (item.name.includes('成功率')) {
            yAxisIndex = 2; // 成功率使用第三个Y轴
          }

          return {
            name: item.name,
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: item.data || [],
            yAxisIndex // 指定使用的Y轴索引
          };
        }) || [];

      return opts;
    });
  } catch {
    // 可以添加重试逻辑或错误提示
    window.$message?.error('图表更新失败，请重试');
  }
}

// 在组件挂载后初始化图表
onMounted(async () => {
  if (props.data) {
    chartData.value = props.data;
    await updateChart();
  }
});

// 在组件更新时检查图表是否需要更新
onUpdated(() => {
  if (props.data && chartData.value !== props.data) {
    chartData.value = props.data;
    // 防止频繁更新，添加防抖处理
    updateChart();
  }
});

// 确保在组件卸载时清理图表实例
onUnmounted(() => {
  // 重置图表数据
  chartData.value = null;
  // 清理可能存在的定时器或事件监听器
  // 取消任何未完成的异步操作
});
</script>

<template>
  <div ref="domRef" class="h-360px overflow-hidden"></div>
</template>

<style scoped>
.chart-title {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.dark .chart-title {
  color: #f3f4f6;
}
</style>
